<template>
  <div>
    <!-- 引入导航栏组件 -->
    <NavBar />
    <!-- 为您的爱宠提供专业寄养服务部分 -->
    <div class="hero-section">
      <div class="hero-text">
        <h1>安心宠物寄养，贴心呵护陪伴</h1>
        <p>优质寄养环境，专业护理团队，让您的宠物享受家一般的温暖</p>
        <button class="btn" @click="goToReservation">立即预约</button>
      </div>
    </div>
    <!-- 热门服务项目部分 -->
    <div class="popular-services-section">
      <h2>热门服务项目</h2>
      <div class="service-item" v-for="(service, index) in services" :key="index">
        <div class="service-content">
          <img :src="service.image" :alt="service.title">
          <div class="service-details">
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
            <span class="price">{{ service.price }}</span>
            <button class="btn" @click="goToReservation">立即预约</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们的特色服务部分 -->
    <div class="features-section">
      <h2>我们的特色服务</h2>
      <div class="feature-item" v-for="(feature, index) in features" :key="index">
        <img :src="feature.image" :alt="feature.title">
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
      </div>
    </div>
    
    <!-- 顾客评价部分 -->
    <div class="reviews-section">
      <h2>顾客评价</h2>
      <div class="review-item" v-for="(review, index) in reviews" :key="index">
        <img :src="review.avatar" :alt="review.name" class="customer-avatar">
        <div class="review-content">
          <h3>{{ review.name }}</h3>
          <div class="rating">
            <i class="fa fa-star" v-for="(star, index) in review.rating" :key="index"></i>
          </div>
          <p>{{ review.content }}</p>
        </div>
      </div>
    </div>
    <!-- 立即预约部分 -->
    <div class="cta-section">
      <h2>立即预约</h2>
      <p>为您的爱宠预订温馨寄养之所，无忧出行</p>
      <button class="btn" @click="goToReservation">在线预约</button>
      <button class="btn btn-outline">联系客服</button>
    </div>
    <!-- 引入底部信息组件 -->
    <PageFooter />
  </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
import PageFooter from '@/components/PageFooter.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function goToReservation() {
  router.push('/reservation');
}

// 热门服务项目数据
const services = [
  {
    title: "标准寄养服务",
    description: "提供干净舒适的居住空间，定时喂食、换水、清理粪便，每天遛弯（针对犬类），让宠物在寄养期间保持规律的生活作息。适合身体健康、生活习惯正常的宠物寄养",
    price: "价格：小型犬 / 猫 50 元 / 天，中型犬 80 元 / 天，大型犬 120 元 / 天",
    image: require('@/assets/service1.png')
  },
  {
    title: "豪华寄养服务",
    description: "设有专属豪华套房，配备独立活动区域、高级窝垫、智能玩具等。提供个性化美食搭配，每天专人陪伴互动，还可享受免费的基础美容护理（如梳毛、擦拭身体等）",
    price: "价格：小型犬 / 猫 100 元 / 天，中型犬 150 元 / 天，大型犬 200 元 / 天",
    image: require('@/assets/service2.png')
  },
  {
    title: "医疗寄养服务",
    description: "针对生病或术后需要特殊护理的宠物，在寄养期间由专业兽医团队提供医疗照顾，包括按时喂药、伤口护理、健康监测等，确保宠物在恢复期间得到悉心照料",
    price: "价格：根据宠物病情和护理需求面议",
    image: require('@/assets/service3.png')
  },
  {
    title: "特殊需求寄养服务",
    description: "对于有特殊饮食要求、行为习惯或需要额外照顾的宠物，可根据主人的具体需求定制寄养方案，提供一对一专属服务",
    price: "价格：根据具体需求面议",
    image: require('@/assets/service4.png')
  }
];

// 特色服务数据
const features = [
  {
    title: "舒适寄养环境",
    description: "打造宽敞、明亮、通风良好的寄养空间，根据宠物种类和体型提供不同规格的舒适居住区域，配备柔软的窝垫、玩具等，让宠物住得舒心",
    image: require('@/assets/feature1.png')
  },
  {
    title: "专业护理团队",
    description: "拥有经过专业培训的宠物护理人员，熟悉宠物的生活习性和健康需求，提供喂食、遛弯、清洁、健康监测等全方位贴心护理服务",
    image: require('@/assets/feature2.png')
  },
  {
    title: "个性化喂养方案",
    description: "根据宠物的饮食偏好、年龄、健康状况等，制定个性化的喂养计划，提供优质的宠物食品，确保宠物在寄养期间营养均衡",
    image: require('@/assets/feature3.png')
  },
  {
    title: "实时互动与反馈",
    description: "提供实时视频监控服务，主人可随时查看宠物的生活状态。同时，工作人员会定期向主人反馈宠物的情况，分享宠物的日常照片和视频",
    image: require('@/assets/feature4.png')
  }
];

// 顾客评价数据
const reviews = [
  {
    name: "陈嘉",
    rating: 5,
    content: "第一次把狗狗送来寄养，心里很担心。但工作人员每天都给我发狗狗的视频和照片，狗狗很开心。环境也很干净卫生，以后出门再也不用担心狗狗没人照顾！",
    avatar: require('@/assets/customer1.png')
  },
  {
    name: "杨悦",
    rating: 5,
    content: "我家猫咪比较胆小敏感，在这里寄养居然适应得很好。工作人员很有耐心，细心照顾猫咪的情绪和生活，回来后猫咪状态特别好，真的太感谢了！",
    avatar: require('@/assets/customer2.png')
  },
  {
    name: "周明",
    rating: 5,
    content: "我家狗狗刚做完手术需要特殊护理，选择了这里的医疗寄养服务。兽医团队专业又负责，把狗狗照顾得无微不至，恢复得也很好。以后有需要还会选择这里！",
    avatar: require('@/assets/customer3.png')
  }
];
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* 为您的爱宠提供专业寄养服务部分样式 */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/grooming-hero.jpg');
  background-size: cover;
  background-position: center;
  padding: 80px;
  color: white;
  height: 600px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  animation: heroAnimation 1.5s ease;
}
@keyframes heroAnimation {
  from {
    opacity: 0.5;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  width: 70%;
  text-align: center;
  font-size: 30px;
  line-height: 1.4;
}

/* 热门服务项目部分样式 */
.popular-services-section {
  padding: 80px;
  text-align: center;
}

.service-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: serviceAnimation 1.5s ease;
}
@keyframes serviceAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.service-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.service-content img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 30px;
}

.service-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.price {
  color: #e76f51;
  font-weight: bold;
  margin-top: 10px;
}

/* 我们的特色服务部分样式 */
.features-section {
  padding: 80px;
  text-align: center;
  background-color: #f9f9f9;
}
.feature-item {
  display: inline-block;
  width: 20%;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: featureAnimation 1.5s ease;
}
@keyframes featureAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.feature-item img {
  width: 80%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
}

/* 顾客评价部分样式 */
.reviews-section {
  padding: 80px;
  text-align: center;
}
.review-item {
  display: inline-block;
  width: 30%;
  margin: 10px;
  text-align: left;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: reviewAnimation 1.5s ease;
}
@keyframes reviewAnimation {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.review-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.customer-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}
.rating {
  color: #e9c46a;
  margin-bottom: 10px;
}

/* 立即预约部分样式 */
.cta-section {
  padding: 80px;
  text-align: center;
  background-color: #fbe8dc;
}

/* 按钮样式 */
.btn {
  background-color: #e76f51;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #d65c41;
}
.btn-outline {
  background-color: transparent;
  color: #e76f51;
  border: 2px solid #e76f51;
  padding: 15px 30px;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
  background-color: #e76f51;
  color: white;
}
</style>